<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        div {
            margin: 20px auto;
            width: 600px;
            overflow: hidden;
            position: relative;
        }

        ul.ulBox {
            /* overflow: hidden; */
            /* width: 3000px; */
            width: 600%;
            position: relative;
        }

        ul.ulBox li {
            width: 600px;
            float: left;

        }

        img {
            display: block;
            width: 100%;
        }

        ol {
            list-style: none;
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: none;
        }

        ol>li {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: red;
            text-align: center;
            line-height: 40px;
            color: #fff;

        }

        .leftArrow {
            float: left;


        }

        .rightArrow {
            float: right;
        }


        .cirleBox {
            position: absolute;
            bottom: 40px;
            right: 40px;
        }

        .cirleBox li {
            width: 30px;
            height: 30px;
            margin: 0 8px;
            /* padding: 0 5px; */
            background-color: green;
            color: #fff;
            border-radius: 50%;
            float: left;
            font-size: 22px;
            text-align: center;
            box-sizing: border-box;

        }

        .cirleBox li.active {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="divBox">
        <ul class="ulBox">
            <!-- 图片 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>

        </ul>

        <!--  这里放动态生成的小圆点 -->
        <ul class="cirleBox">
            <!--  这里放动态生成的小圆点 -->
        </ul>

        <!-- 左右箭头 -->
        <ol class="olBox">
            <li class="leftArrow">&lt;</li>
            <li class="rightArrow">&gt;</li>
        </ol>
    </div>

    <script>
        //   1 动态生成我们的小圆点 (根据图片的数量去动态生成)
        //   2 鼠标移入 左右箭头显示  并且 图片停止    鼠标离开 左右箭头隐藏  图片继续移动 
        //   3 点击小圆点可以切换图片
        //   4 图片可以自动轮播 
        //   5 点击左右箭头可以切换图片



        //节流阀思想
        var flag = true;
        var mytimerId;
        var count = 0; /*  默认图片点击的时候的初始值*/
        var circleNum=0; /* 小圆点初始值  代表初始高亮值*/


        var divBox = document.querySelector('.divBox');
        var divBoxWidth = divBox.offsetWidth;
        console.log(divBoxWidth)

        //   1 动态生成我们的小圆点 (根据图片的数量去动态生成)
        //1  找人 
        var ulLis = document.querySelectorAll('.ulBox>li');
        console.log(ulLis)
        var cirleBox = document.querySelector('.cirleBox')
     
     

        for (var i = 0; i < ulLis.length; i++) {
            var cirleLi = document.createElement('li');
            cirleLi.innerText = i + 1;
            cirleLi.setAttribute('index', i);

            cirleBox.appendChild(cirleLi)
          
        }

  //让第一个高亮

  cirleBox.children[0].classList.add('active');

        //   2 鼠标移入divBox 左右箭头显示  并且 图片停止    鼠标离开 左右箭头隐藏  图片继续移动 
        //1 找人   divBox
        //2 做事   divBox 移入 
        //3 具体做什么事情   左右箭头与隐藏

        //1 找人   divBox
        var divBox = document.querySelector('.divBox')
        var olBox = document.querySelector('.olBox')

        //   3 点击小圆点可以切换图片

        //1 找人     
        //2 做事   
        //3 具体做什么事情  
        var cirleBoxLis = cirleBox.getElementsByTagName('li'); //可以获取动态生成的所有的元素
        var ulBox = document.querySelector('.ulBox')
        //    console.log(cirleBoxLis)   

        //第二种方式


        // cirleBox.addEventListener('click', function (e) {
        //     for (var i = 0; i < cirleBoxLis.length; i++) {
        //         cirleBoxLis[i].classList.remove('active')
        //     }
        //     e.target.classList.add('active')
        //     var myIndex = e.target.getAttribute('index');
        //     console.log(myIndex)

        //     myanimate(ulBox, -myIndex * divBoxWidth, 10, 50,function(){
        //         console.log('动画执行完成');
        //         flag=true;

        //     });


        // })


        //第一种方式
        for (var i = 0; i < cirleBoxLis.length; i++) {
            cirleBoxLis[i].onclick = function () {
          if(flag) {
              flag=false;
              
        //干掉所有人
              for (var i = 0; i < cirleBoxLis.length; i++) {
                    cirleBoxLis[i].classList.remove('active')
                }
              //当前高亮
                this.classList.add('active')

                 //获取自定义的i  
                var myIndex = this.getAttribute('index');
               

                /*  最后 发现 左右箭头点击的时候图片跟小圆点 高亮要同步*/
                // count=myIndex;
                // circleNum=myIndex; 

                myanimate(ulBox, -myIndex * divBoxWidth, 10, 50, function () {
                    console.log('动画执行完成');
                    flag = true;

                });

          }

            }
        }

        // 5 点击左右箭头可以切换图片
        var leftArrow = document.querySelector('.leftArrow');
        var rightArrow = document.querySelector('.rightArrow');

        /*  1 需求右箭头 切换下一张图片
            2  如果切换到了最后一张图片 需要判断最后一张图片   那么跳转到第一张 
        */

         // 看起来 无缝轮播
        //克隆一张图片第一个li    把克隆的li放到最后面
        var newLi = ulBox.children[0].cloneNode(true)
        ulBox.appendChild(newLi);


        //5.1 实现右边箭头 点击切换图片功能
        rightArrow.onclick = function () {


            var leg = cirleBoxLis.length;
            if (flag) {
                // alert(2);
                flag = false;
                if (count == leg) {
                    count = 0;

                    ulBox.style.left = 0;

                }
                count++;

                myanimate(ulBox, -count * divBoxWidth, 10, 50, function () {
                    flag = true;
                });
                  
                circleNum++;
                if(circleNum==leg) {
                    circleNum = 0;
                } 
             

                changeActive(circleNum)
            }


        }

        //5.2实现左边箭头 点击切换图片功能
        leftArrow.onclick = function () {
            if (flag) {
                flag = false;
                if (count == 0) {
                    console.log(count);


                    count = cirleBoxLis.length;
                    console.log(count)
                    ulBox.style.left = -count * divBoxWidth + 'px';

                }
                count--;

                myanimate(ulBox, -count * divBoxWidth, 10, 50, function () {

                    flag = true;

                });
               

             
                if(circleNum==0) {
                    circleNum = cirleBoxLis.length;
                } 
             
                circleNum--;

                changeActive(circleNum)
       
            }

        }


        //6  实现图片自动轮播 然后 鼠标移入的时候停止自动轮播 移出的时候开启自动轮播
        mytimerId = setInterval(function () {

            rightArrow.click()  // 每隔1秒钟 调用一下右箭头的点击事情
        }, 1000)




        //2 做事   divBox 移入 
        divBox.onmouseover = function () {
            //3 具体做什么事情   左右箭头与隐藏
            olBox.style.display = 'block';


            // 标移入的时候停止自动轮播
            clearInterval(mytimerId);
            mytimerId = null;


        }

        divBox.onmouseout = function () {
            //3 具体做什么事情   左右箭头与隐藏
            olBox.style.display = 'none';


            // 移出的时候开启自动轮播
            mytimerId = setInterval(function () {

                rightArrow.click()  // 每隔1秒钟 调用一下右箭头的点击事情
            }, 1000)


        }


        //  8 小圆点与图片跟随或者一一对应 

        function changeActive(activeIndex) {
            for (var i = 0; i < cirleBoxLis.length; i++) {
                    cirleBoxLis[i].classList.remove('active')
                }

                cirleBoxLis[activeIndex].classList.add('active')
               
               
        }


        function myanimate(ele, target, step, time, callback) {


            if (ele.timerId) {

                clearInterval(ele.timerId)
            }
            //保证同一个元素身上永远一个定时器,永远清除的自己的定时器

            ele.timeId = setInterval(function () {


                var steps = (target - ele.offsetLeft) / step;

                steps = steps > 0 ? Math.ceil(steps) : Math.floor(steps) // 有可能steps 是负数 趋近于0
                // console.log(steps)

                // console.log(ele.timeId)

                if (ele.offsetLeft == target) {
                    ele.style.left = target + 'px';
                    clearInterval(ele.timeId)

                    callback && callback()

                }
                ele.style.left = ele.offsetLeft + steps + 'px';

            }, time);
        }


    </script>
</body>

</html>